<template>
  <q-dialog v-model="show">
    <q-card>
      <div class="title">
        <div class="flex justify-end">
          <q-btn style="font-size: 18px;color: white"
                 flat
                 round
                 dense
                 @click="show=false"
                 class="iconfont icontubiao-67 white basic-btn" />
        </div>
      </div>

      <q-card-section class="content scrollbar">
        <div class="box-wrapper flex justify-between" v-for="(data, index) in popupData" :key="index">
          <div class="left">
            <div class="date">{{data.days | toTime}}</div>
            <div class="info flex items-center" v-for="item in data.list" :key="item.id" @click="goDetail(item.id)">
              <div class="circle"></div>
              <div class="text-ellipsis text-size">{{item.title}}</div>
            </div>
          </div>
          <div class="more" @click="$router.push('/main/home/news/news-detail_2')">查看更多<q-icon class="arrow-icon" name="iconfont icontubiao2-95"/></div>
        </div>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script>

export default {
  name: 'announcement',
  props: {
    popupData: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      show: true
    }
  },
  methods: {
    goDetail (id) {
      this.$router.push({
        path: `/main/home/news/news-detail_1`,
        query: {
          id
        }
      })
    }
  }
}
</script>

<style scoped lang="stylus">
.title{
  width 560px
  height 120px
  background-image url("../../../statics/img/announcement.png")
  background-size 100% 100%
}

.content {
  height 376px
  overflow-y auto

  .box-wrapper{
    margin-bottom 10px
    .left{
      width 444px
      .info{
        cursor pointer
      }

      .date{
        font-size: 16px;
        font-weight: 500;
        color: #5F77FD;
        line-height: 2
      }

      .circle{
        width: 10px;
        height: 10px;
        background: #F7B82D;
        border-radius: 50%;
        margin-right 6px
      }

      .text-size{
        width calc(100% - 20px)
      }
    }

    .more{
      font-size: 14px;
      font-weight: 500;
      color: #999999;
      margin-top 8px
      cursor pointer
    }
  }
}
</style>
